<template>
	<view class="content">
		<uni-section title="自定义列数" type="line" padding>
			<uni-grid :column="2" :highlight="true" @change="change" show-border=true>
				<!-- <uni-grid-item v-for="(item, index) in 6" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff;">
						<uni-icons type="image" :size="30" color="#777" />
						<text class="text">文本信息</text>
					</view>
				</uni-grid-item> -->
				
				<uni-grid-item v-for="(item, index) in storeList" :index="index" :key="index">
					<view class="grid-item-box">
						<!-- <image></image> -->
						<view class="text_box">
							<text class="store_name">{{item.storeName}}</text>
							<view class="location">
								<uni-icons type="location" size="20" color=""></uni-icons>
								<text>5km</text>
							</view>
						</view>
						<image class="store_image" :src="item.imgUrl"></image>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeList: [{
					imgUrl: '../../static/测试图片.jpg',
					storeName: '月城酒店'
				}, {
					imgUrl: '../../static/测试图片.jpg',
					storeName: '月城酒店'
				}, {
					imgUrl: '../../static/测试图片.jpg',
					storeName: '月城酒店'
				}, {
					imgUrl: '../../static/测试图片.jpg',
					storeName: '月城酒店'
				}, {
					imgUrl: '../../static/测试图片.jpg',
					storeName: '月城酒店'
				}, {
					imgUrl: '../../static/测试图片.jpg',
					storeName: '月城酒店'
				}, {
					imgUrl: '../../static/测试图片.jpg',
					storeName: '月城酒店'
				}, {
					imgUrl: '../../static/测试图片.jpg',
					storeName: '月城酒店'
				}, {
					imgUrl: '../../static/测试图片.jpg',
					storeName: '月城酒店'
				}, {
					imgUrl: '../../static/测试图片.jpg',
					storeName: '月城酒店'
				}]
			}
		},
		methods: {
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++

				uni.showToast({
					title: `点击第${index+1}个宫格`,
					icon: 'none'
				})
			},
			add() {
				if (this.dynamicList.length < 9) {
					this.dynamicList.push({
						url: `/static/c${this.dynamicList.length+1}.png`,
						text: `Grid ${this.dynamicList.length+1}`,
						color: this.dynamicList.length % 2 === 0 ? '#f5f5f5' : "#fff"
					})
				} else {
					uni.showToast({
						title: '最多添加9个',
						icon: 'none'
					});
				}
			},
			del() {
				this.dynamicList.splice(this.dynamicList.length - 1, 1)
			}
		}
	}
</script>

<style>
	.content {
		background-color: rgb(244, 244, 244);
		font-family: PingFangSC-Regular, sans-serif;
	}
	
	.store_image {
		width: 100%;
		height: 355upx;
	}
	
	.text_box {
		font-size: 14px;
		display: flex;
		justify-content: space-between;
		vertical-align: middle;
	}
	
	.store_name {
		font-weight: bold;
	}
	
	.location text{
		height: 20upx;
		line-height: 20upx;
		vertical-align: middle;
	}

	.grid-item-box {
		width: 335upx;
		height: 345upx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 20upx;
		margin-right: 20upx;
		margin-bottom: 20upx;
	}
</style>
